<!-- 配置-定义 -->
<template>
    <div class="container-app">
        <div class="bg-white area">
            <div class="row head">
                <q-separator vertical size="3px" class="leftLine bg-primary" />
                <span class="q-ml-md name text-primary">公司信息</span>
            </div>
            <q-form ref="form" class="form row" @submit="submit">
                <div class="input row" style="width:90%;">
                    <span class="q-mt-sm">公司LOGO</span>
                    <q-file ref="uploadEquit" class="picture-facility" borderless display-value v-model="imgFile"
                        :disable="disable">
                        <img class="img-picture" :src="imageShow(form.img)" />
                    </q-file>
                </div>
                <div class="input row">
                    <span class="q-mt-sm">公司代码</span>
                    <q-input outlined dense v-model="form.code" disable />
                </div>
                <div class="input row">
                    <span class="q-mt-sm">公司名称</span>
                    <q-input outlined dense v-model="form.name" disable />
                </div>
                <div class="input row">
                    <span class="q-mt-sm">公司地址</span>
                    <q-input outlined dense v-model="form.addr" :disable="disable" />
                </div>
            </q-form>
            <div class="text-right q-pa-lg">
                <q-btn v-if="disable" class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" label="编辑"
                    @click="bjClick" />
                <q-btn v-else class="q-mr-sm q-mt-xs borderRadius" unelevated color="primary" label="保存"
                    @click="submit" />
            </div>
        </div>
    </div>
</template>

<script>
import { defineComponent } from 'vue'
import { mapGetters } from 'vuex';
import { formFileFun } from 'src/api/asset'
import hosts from 'src/utils/host.js'
import { getCompanyList, updataCompany } from 'src/api/adminCompany.js'

export default defineComponent({
    name: 'corporate',
    components: {
    },
    computed: {
        ...mapGetters(['themeColor', 'device']),
    },
    data() {
        return {
            imgFile: null,
            disable: true,
            id: 0,
            form: {
                name: '',
                img: '',
                code: '',
                addr: '',
            },
        }
    },
    watch: {
        imgFile: {
            immediate: true,
            handler(val) {
                if (!val) return
                this.uploadFail(val)
            }
        },
    },
    mounted() {
        this.getCon();
    },
    methods: {
        // 获取公司信息
        getCon() {
            getCompanyList().then(res => {
                if (res.status == 200) {
                    res.data.map(item => {
                        this.id = item.id
                        this.form.img = item.img
                        this.form.name = item.name
                        this.form.code = item.code
                        this.form.addr = item.addr
                    })
                }
            })
        },
        // 修改
        submit() {
            updataCompany(this.id, this.form).then(res => {
                if (res.status == 200) {
                    this.getCon()
                    this.disable = true;
                    this.$q.notify({
                        type: 'positive',
                        position: 'top',
                        message: '修改成功！'
                    })
                }
            })
        },
        bjClick() {
            this.disable = false;
        },
        /**
         * 上传图片
         */
        uploadFail(item) {
            const fileObj = item
            const Imgform = new FormData() // formData对象
            Imgform.append('file', fileObj)
            formFileFun(Imgform).then(res => {
                if (res.status === 200) {
                    this.form.img = res.md5
                    this.imgFile = null
                    this.$q.notify({
                        type: 'positive',
                        position: 'top',
                        message: `图片上传成功`
                    })
                }
            })
        },
        imageShow(item) {
            return hosts + item
        },
    }

})
</script>

<style lang="scss" scoped>
.area {
    width: 40%;
}

.input {
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
    width: 100%;
    justify-content: center;

    span {
        width: 110px;
        margin-top: 10px;
        font-weight: bold;
    }

    .q-input {
        min-width: 270px;
        height: 40px;
        border-radius: 8px;
    }
}

.picture-facility {
    max-width: 300px;
    position: relative;
    height: 38px;
    margin-bottom: 40px;
    margin-left: 30px;

    .img-picture {
        position: absolute;
        left: 50%;
        top: -3px;
        transform: translate(-50%, 0);
        width: 100px;
        height: 100px;
        line-height: 38px;
        cursor: pointer;
        background-size: 100%;
        background-repeat: no-repeat;
    }
}

@media (max-width: 1500px) {
    .area {
        width: 80% !important;
    }
}

@media (max-width: 1000px) {
    .area {
        width: 100% !important;
    }

    .q-input {
        flex: 1 !important;
    }
}
</style>

